<template>
  <view>
    <!-- 页面标题begin -->
    <view class="smart-page-head">
      <view class="smart-page-head-title">text 文本编辑</view>
    </view>
    <!-- 页面标题end -->
    <!-- 主体begin -->
    <view>
      <view class="text-box">
        <text>{{text}}</text>
      </view>
      <button type="primary" @click="add()">+添加</button>
      <button type="warn" @click="del()">-删除行</button>
    </view>
    <!-- 主体end -->
  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      texts: [
	        'hbuilder 400万开发者',
	        'uni-app跨平台',
	        'smartUI自定义框架'
	      ],
	      extraLine: [],
	      text: 'guilin travel\n'
	    }
	  },
	  methods: {
	    /*添加行的函数*/
	    add() {
	      console.log('add.....');
	      this.extraLine.push(this.texts[this.extraLine.length % 3]);
	      this.text = this.extraLine.join('\n');
	    },
	    /*删除行的函数*/
	    del() {
	      console.log('del.....');
	      this.extraLine.pop();
	      this.text = this.extraLine.join('\n');
	    }
	  }
	}
</script>

<style>
	.text-box{
		background-color: #ccc9ca;
		min-height: 200upx;
		margin-bottom:40upx ;
		padding: 40upx 0;
		text-align: center;
	}
</style>